<template>
  <a-drawer
    v-model:visible="visible"
    :title="modalTitle"
    :closable="false"
    width="75%"
    :footer-style="{ textAlign: 'right' }"
    @close="handleCancel"
  >
    <a-form ref="formRef" :model="formState" :label-col="{ span: 3 }">
      <a-form-item
        label="标题"
        name="title"
        :rules="[{ required: true, message: '请输入标题' }]"
        :wrapper-col="{ span: 12 }"
      >
        <a-input v-model:value="formState.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number
          v-model:value="formState.sort"
          placeholder="请输入排序"
          style="width: 250px"
        />
      </a-form-item>
      <a-form-item
        label="商品"
        :rules="[{ required: true, message: '请选择商品' }]"
        name="goods_id"
      >
        <a-button type="primary" @click="handleAddSubscribe">
          <PlusOutlined />
          添加商品
        </a-button>
        <a-table
          :columns="columns"
          :data-source="state.goods"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'goods_img'">
              <a-image
                :src="record.goods_img"
                :width="50"
                class="image"
              ></a-image>
            </template>
          </template>
        </a-table>
      </a-form-item>
      <a-form-item
        label="兑换所需能量"
        name="energy"
        :rules="[{ required: true, message: '请输入能量' }]"
      >
        <a-input-number
          v-model:value="formState.energy"
          placeholder="请输入能量"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item
        label="类型"
        name="new_type"
        :rules="[{ required: true, message: '请输入公布时间' }]"
      >
        <a-radio-group v-model:value="formState.new_type">
          <a-radio :value="0">普通</a-radio>
          <a-radio :value="1">新人1</a-radio>
          <a-radio :value="2">新人2</a-radio>
          <a-radio :value="3">新人3</a-radio>
          <a-radio :value="4">超级福利</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="签到总进度"
        name="sign_all_energy"
        :rules="[{ required: true, message: '请输入签到总进度' }]"
      >
        <a-input-number
          v-model:value="formState.sign_all_energy"
          placeholder="请输入签到总进度"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item
        label="每次签到赠送进度"
        name="sign_energy"
        :rules="[{ required: true, message: '请输入赠送进度' }]"
      >
        <a-input-number
          v-model:value="formState.sign_energy"
          placeholder="请输入赠送进度"
          style="width: 300px"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-drawer>
  <!-- 申购商品 -->
  <Goods ref="goodsRef" @select-goods="handleGood" />
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { add, edit } from "@/api/exchange";
import Goods from "./Goods.vue";
import { useRouter } from "vue-router";

const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();
const goodsRef = ref();

const columns = [
  {
    title: "id",
    dataIndex: "goods_id",
  },
  {
    title: "商品名称",
    dataIndex: "goods_name",
  },
  {
    title: "商品图片",
    dataIndex: "goods_img",
    ellipsis: true,
  },
  {
    title: "货号",
    dataIndex: "goods_no",
  },
  {
    title: "库存",
    dataIndex: "stock_num",
  },
];
const formState = reactive({
  title: "",
  goods_id: null,
  energy: null,
  new_type: 0,
  sign_all_energy: "",
  sign_energy: "",
  sort: 0,
});
const router = useRouter();
const state = reactive({
  goods: [],
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑兑换/新人活动" : "新增兑换/新人活动";
  if (model && model.exchange_id) {
    state.goods.push(model.goods);
    resetForm(model);
  } else {
    resetForm({
      exchange_id: null,
    });
    state.goods = [];
  }
};

//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    let params = {
      ...formState,
    };
    if (formState.exchange_id) {
      edit({
        id: formState.exchange_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add({ ...params }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
// 关闭
const handleCancel = () => {
  formRef.value.resetFields();
  state.goods = [];
  visible.value = false;
};
// 添加申购商品
const handleAddSubscribe = () => {
  goodsRef.value.show();
};
const handleGood = (data) => {
  state.goods = data;
  formState.goods_id = data[0].goods_id;
};
defineExpose({
  show,
});
</script>